{% load i18n static %}

<div id="{{ model_name }}_edit_form" style="width: auto; ">
    <form class="layui-form data-form" style="width:auto;  " action="" method="post" >
        {% csrf_token %}
        <div style="height:auto; width:auto; overflow-x:scroll ; padding-top: 10px;   ">
            {% for node in node_list %}
                {% if node.state == 1 %}
                    <div id="divPending" title="Roles: {{ node.node_engine.approver }}" style="border: 1px solid #d8d8d8; float: left; display: inline; border-radius: 4px;
                        color: #909090; margin: 4px; vertical-align: top; width: 250px; background-color: #efefef; font-family: Open sans, sans-serif; padding: 20px; letter-spacing: 0.5px; font-weight: 300; text-transform: uppercase; box-shadow: 0 8px 6px -6px #9E9E9E;">
                {% elif node.state == 2 %}
                        <div id="divApproved"
                             title="Approver name: {{ node.approver_employee.first_name }} , {{ node.approver_employee.last_name }} | Roles:  {{ node.node_engine.approver }} | Remark: {{ node.remark }} "
                             style="border: 1px solid #9ad852; float: left; display: inline; border-radius: 4px; color: #636363; margin: 4px; vertical-align: top; width: 250px; background-color: #9eda59; font-family: Open sans, sans-serif; padding: 20px; letter-spacing: 0.5px;font-weight: 300; text-transform: uppercase; box-shadow: 0 8px 6px -6px #9E9E9E;">
                {% elif node.state == 3 %}
                        <div id="divRejected"
                             title="Rejected name: {{ node.approver_employee.first_name }} , {{ node.approver_employee.last_name }} | Roles:  {{ node.node_engine.approver }} | Remark: {{ node.remark }} "
                             style="border: 1px solid #fb521c; float: left; display: inline; border-radius: 4px;color: #636363; margin: 4px; vertical-align: top; width: 250px; background-color: #fb764c;font-family: Open sans, sans-serif; padding: 20px; letter-spacing: 0.5px;font-weight: 300; text-transform: uppercase; box-shadow: 0 8px 6px -6px #9E9E9E;">
                {% elif node.state == 4 %}
                        <div id="divReapply"
                             title="Reapply name: {{ node.approver_employee.first_name }} , {{ node.approver_employee.last_name }} | Roles:  {{ node.node_engine.approver }} | Remark: {{ node.remark }} "
                              style="border: 1px solid #d8d8d8; float: left; display: inline; border-radius: 4px;
                        color: #909090; margin: 4px; vertical-align: top; width: 250px; background-color: #efefef; font-family: Open sans, sans-serif; padding: 20px; letter-spacing: 0.5px; font-weight: 300; text-transform: uppercase; box-shadow: 0 8px 6px -6px #9E9E9E;">
                {% elif node.state == 5 %}
                        <div id="divVoid"
                             title="Void name: {{ node.approver_employee.first_name }} , {{ node.approver_employee.last_name }} | Roles:  {{ node.node_engine.approver }} | Remark: {{ node.remark }} "
                             style="border: 1px solid #fb521c; float: left; display: inline; border-radius: 4px;color: #636363; margin: 4px; vertical-align: top; width: 250px; background-color: #fb764c;font-family: Open sans, sans-serif; padding: 20px; letter-spacing: 0.5px;font-weight: 300; text-transform: uppercase; box-shadow: 0 8px 6px -6px #9E9E9E;">
                {% elif node.state == 6 %}
                        <div id="divRevoke"
                             title="Revoke name: {{ node.approver_employee.first_name }} , {{ node.approver_employee.last_name }} | Roles:  {{ node.node_engine.approver }} | Remark: {{ node.remark }} "
                             style="border: 1px solid #fb521c; float: left; display: inline; border-radius: 4px;color: #636363; margin: 4px; vertical-align: top; width: 250px; background-color: #fb764c;font-family: Open sans, sans-serif; padding: 20px; letter-spacing: 0.5px;font-weight: 300; text-transform: uppercase; box-shadow: 0 8px 6px -6px #9E9E9E;">
                {% endif %}
            <label>{{ node.name }}</label>
            </br>
            {% if node.state == 1 %}
                <label>{% trans 'workflow_node_state_pending' %}</label>
            {% elif node.state == 2 %}
                 <label>{% trans 'workflow_node_state_approved' %}</label>
            {% elif node.state == 3 %}
                 <label>{% trans 'workflow_node_state_rejected' %}</label>
            {% elif node.state == 4 %}
                 <label>{% trans 'workflow_node_state_reapply' %}</label>
            {% elif node.state == 5 %}
                 <label>{% trans 'workflow_node_state_void' %}</label>
            {% elif node.state == 6 %}
                 <label>{% trans 'workflow_node_state_revoke' %}</label>
            {% endif %}
            <button id="btnview{{ node.id }}"
                    onclick="openDiv('div{{ node.id }}','btnview{{ node.id }}') ;return false">{% trans 'btn_view' %}
            </button>
            <div id="div{{ node.id }}" class="foo">
                {% if node.approver_admin_id %}
                    <labe><u>Admin</u></labe>
                    </br>
                    <labe>{% trans 'base_model_user' %}: {{ node.approver_admin.username }} </labe>
                {% elif node.approver_employee %}
                    <labe>{% trans 'model_employee' %}: {{ node.approver_employee }} </labe>
                    </br>
                    <labe>{% trans 'node_name' %}: {{ node.name }}</labe>
                {% else %}
                    <labe>{% trans 'model_employee' %}: </labe>
                    </br>
                    <labe>{% trans 'node_name' %}: {{ node.name }}</labe>
                {% endif %}
                </br>
                {% if node.remark %}
                    <labe>{% trans 'remark' %}: {{ node.remark }} </labe>
                {% else %}
                    <labe>{% trans 'remark' %}: </labe>
                {% endif %}
            </div>
            </div>
                {% if forloop.last %}

                {% else %}
                    <img src="/media/img/right-arrow.png" style="float: left;box-sizing: initial; padding-top: 37px; height: 20px;
                ">
                {% endif %}
            {% endfor %}
            </div>
            <div class="layui-collapse" lay-accordion>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">{% trans 'information_workflow' %}</h2>
                    <div class="layui-colla-content layui-show">
                        <div class="layui-row">
                            <div class="layui-col-md9">
                                <div class="layui-form-item">
                                    {% if workflow_employee_first_name %}
                                    <labe><strong>{% trans 'emp_field_firstName' %}: </strong>{{ workflow_employee_first_name }}</labe>
                                    {% endif %}
                                </div>
                                <div class="layui-form-item">
                                    {% if workflow_employee_last_name %}
                                    <labe><strong>{% trans 'emp_field_lastName' %}: </strong>{{ workflow_employee_last_name }}</labe>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="layui-col-md9">
                                <div class="layui-form-item">
                                    <labe><strong>{% trans 'emp_field_employeeCode' %}: </strong> {{ workflow_employee_code }}</labe>
                                </div>
                            </div>
                            <div class="layui-col-md9">
                                <div class="layui-form-item">
                                    <labe><strong>{% trans 'workflow_content_type' %}: </strong> {{ workflow_content_type }}</labe>
                                </div>
                                <div class="layui-form-item">
                                    <labe><strong>{% trans 'instance_issue_date' %}: </strong>{{ workflow_instance_issue_date }}
                                    </labe>
                                </div>
                                <div class="layui-form-item">
                                    <labe><strong>{% trans 'instance_apply_reason' %}: </strong>{{ workflow_instance_apply_reason }}
                                    </labe>
                                </div>
                            </div>
                            <div class="layui-col-md9">
                                <div class="layui-form-item">
                                    <labe><strong>{% trans 'workflow_name' %} : </strong> {{ workflow_name }}</labe>
                                </div>
                                <div class="layui-form-item" id="divRemark">
                                    <labe><strong>{% trans 'reason' %}: </strong></labe>
                                    <textarea type="text" name="txtReason" id="txtReason"
                                              class="layui-input">
                                               </textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="divButtonera" class="layui-layer-btn">
                    <!--  <button class="layui-layer-btn1"  type="button" id="Approve" onclick="Approve()"  style="width: 60px;  color: #fff;  background-color: #1E9FFF; height: 30px ; border-color: #1E9FFF" >Approve</button> -->

                    <a class="layui-layer-close1 layui-layer-close " id="Approve"
                       style="width: 80px;  color: #fff;  background-color: #1E9FFF; height: 30px ; margin-top:-20px;   margin-left: -200px; border-color: #1E9FFF">{% trans 'approve' %}</a>

                    <!-- layui-layer-btn1 -->
                    <a class="layui-layer-close1 layui-layer-close " id="reject"
                       style="width: 80px;  color: #fff;  background-color: #1E9FFF; height: 30px ;  margin-top:-20px;  margin-left: -80px; border-color: #1E9FFF">{% trans 'reject' %}</a>

                    <!-- <button type="button" id="rejecte" onclick="rejecte()"  style="width: 60px; color: #fff;  background-color: #1E9FFF; height: 30px ; border-color: #1E9FFF">Rejecte</button>
                     -->
                </div>
            </div>
            <input type="hidden" name="csrfmiddlewaretoken" value="{% csrf_token %}">
            <input type="hidden" name="hhworkflowintanceid" value="{{ workflow_intance_id }}">
            <input type="hidden" name="hhedit" value="{{ edit }}">
    </form>
</div>


<script>
    $(document).ready(function () {
        $('.foo').hide();
        var queryString = $("input[name=hhedit]").val();


        $("#txtReason").val($("#txtReason").val().trim());
        var countReject = $("#divRejected").length;
        var countPending = $("#divPending").length;
        if (countReject > 0 || countPending == 0 || queryString == 0) {
            $('#Approve').hide();
            $('#reject').hide();
            $('#divRemark').hide();
        }


        //$('.layui-layer-btn')[1].remove();
    });

    function openDiv(divId, buttonID) {
        if ($('#' + divId + '').is(":visible")) {
            $('#' + divId + '').hide();
            $('#' + buttonID + '').text("{% trans 'btn_view' %}");
        }
        else {
            $('#' + divId + '').show();
            $('#' + buttonID + '').text("{% trans 'btn_hide' %}");
        }

        return true;
    }

    $('#Approve').click(function () {
        var csrf = $("input[name=csrfmiddlewaretoken]").val();
        var wfi = $("input[name=hhworkflowintanceid]").val();
        var reason = $("#txtReason").val().trim();

//ajax
        $.ajax({
            type: 'POST',
            headers: {'X-CSRFToken': csrf},
            url: '/workflowinstance/approve/',
            data: {
                csrfmiddlewaretoken: csrf,
                workflow_instance_id: obj.data.id,
                remark: '-'
            },
            dataType: 'text',
            success: function (data) {
                response_message = JSON.parse(data)
                if (response_message['error_code'] != 0) {
                    alert(response_message['result'])
                    console.log('error-code: ', response_message['error_code']);
                    console.log('error-message: ', response_message['result']);
                } else {
                    table.reload(tb.config.id);
                }
            },
            error: function (request, status, error) {
                console.log(request)
                response_message = JSON.parse(request.responseText)
                alert('error' + response_message['result'])
                console.log(request.responseText);
                console.log(status.responseText);
                console.log(request.Message);
            }
        });
//end ajax
    });


    $('#reject').click(function () {

        var csrf = $("input[name=csrfmiddlewaretoken]").val();
        var wfi = $("input[name=hhworkflowintanceid]").val();
        var reason = $("#txtReason").val().trim();
//ajax
        $.ajax({
            type: 'POST',
            headers: {'X-CSRFToken': csrf},
            url: '/workflowinstance/reject/',
            data: {
                csrfmiddlewaretoken: csrf,
                workflow_instance_id: obj.data.id,
                remark: '-'
            },
            dataType: 'text',
            success: function (data) {
                response_message = JSON.parse(data)
                if (response_message['error_code'] != 0) {
                    alert(response_message['result'])
                    console.log('error-code: ', response_message['error_code']);
                    console.log('error-message: ', response_message['result']);
                } else {
                    table.reload(tb.config.id);
                }
            },
            error: function (request, status, error) {
                response_message = JSON.parse(request.responseText)
                alert('error' + response_message['result'])
                console.log(request.responseText);
                console.log(status.responseText);
                console.log(request.Message);
            }
        });

//end ajax
    });


</script>